<template>
  <div
    @click="showDialog"
    class="ac-icon-select"
  >
    <ac-icon v-if="modelValue" :size="iconSize" :iconId="modelValue" />
    <ac-icon
      v-else
      color="rgb(153, 153, 153)"
      :size="iconSize"
      iconId="018dca3b4707c4c43a2f"
    />
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="图标选择"
    style="min-height: 500px"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
    append-to-body
    fullscreen
  >
    <div style="width: 100%; text-align: center">
      <el-input
        v-model="searchValue"
        placeholder="搜索"
        style="width: 400px;
          margin-right: 10px;"
        clearable
      />
      <el-button type="danger" @click.stop="cleanIcon()">清空</el-button>
    </div>
    <div class="ac-icon-list">
      <div
        v-for="(icon, index) in iconList.filter(item => searchValue ? item.name.indexOf(searchValue) >= 0 : true)"
        :key="index"
        class="icon-item"
        @click.stop="selectIcon(icon)"
      >
        <div class="item-icon" :title="icon.name">
          <ac-icon size="30" :iconId="icon.id" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getIconList } from '@/utils/system';

const modelValue = defineModel();
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  iconSize: {
    type: String,
    default: '20'
  },
  size: [Number, String],
  fieldList: [Array, String]
});

const iconList = ref([]);
const dialogVisible = ref(false);
const searchValue = ref('');

const showDialog = () => {
  dialogVisible.value = true;
}

const selectIcon = (icon) => {
  modelValue.value = icon.id;
  dialogVisible.value = false;
};

const cleanIcon = () => {
  modelValue.value = '';
  dialogVisible.value = false;
};

onMounted(() => {
  getIconList().then(res => {
    iconList.value = res;
  });
});
</script>

<style lang="scss">
.ac-icon-list {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-gap: 10px;
  justify-content: center;
}
.ac-icon-list .icon-item {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.ac-icon-list .icon-item .item-icon {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ac-icon-list .icon-item .item-icon img {
  width: 100%;
}
.ac-icon-list .icon-item:hover {
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
}
</style>

<style scoped lang="scss">
.ac-icon-select {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 22px;
  height: 22px
}
.ac-icon-select:hover {
  border: 1px solid #cdd0d6;
}
.ac-icon-select img {
  width: 100%;
}
</style>